<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1">
    <title>订单列表</title>
    <meta name ="keywords" content="港珠澳头等舱">
    <meta name="description" content="港珠澳头等舱">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/detail.css">
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
    <script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="../js/fit.js"></script>
    <script type="text/javascript" src="../js/moment.min.js"></script>
  </head>

  <body>
    <div class="container list-container">

        <ul class="list-tabs">
        </ul>
        <div class="swiper-container list-swiper">
            <div class="swiper-wrapper">

                <!-- 待使用 -->
                <div class="swiper-slide list-box unused">
                    <!-- todo 加载待使用订单 -->
                    <div class="list-li" orderid="111">
                        <p>
                            3月15日 8:00 发车
                            <span>¥ 692</span>
                        </p>
                        <ul>
                            <li>
                                <em>1</em>
                                <p>珠海北站 - 珠海口岸  3座</p>
                                <span>前排×1、后排×2</span>
                            </li>
                            <li>
                                <em>2</em>
                                <p>珠海口岸 - 香港机场  3座</p>
                                <span>后排×3</span>
                            </li>
                        </ul>
                    </div>
                    <div class="list-li" orderid="222">
                        <p>
                            3月15日 8:00 发车
                            <span>¥ 692</span>
                        </p>
                        <ul>
                            <li>
                                <em>1</em>
                                <p>珠海北站 - 珠海口岸  3座</p>
                                <span>前排×1、后排×2</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 已过期 -->
                <div class="swiper-slide list-box expired">
                    <!-- todo 加载已过期订单 -->
                    <div class="list-li" orderid="333">
                        <p>
                            3月15日 8:00 发车
                            <span>¥ 692</span>
                        </p>
                        <ul>
                            <li>
                                <em>1</em>
                                <p>珠海北站 - 珠海口岸  3座</p>
                                <span>前排×1、后排×2</span>
                            </li>
                            <li>
                                <em>2</em>
                                <p>珠海口岸 - 香港机场  3座</p>
                                <span>后排×3</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <script type="text/javascript" src="../js/swiper.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript">
        // 类型切换模块
        var listSwiper = new Swiper ('.list-swiper', {
            slideClass : 'list-box',
            direction: 'horizontal',
            loop: false,
            pagination: {
                el: '.list-tabs',
                clickable: true,
                bulletClass : 'tabs-li',
                bulletActiveClass: 'active',
                renderBullet: function (index,className) {
                    var text;
                    switch(index){
                        case 0:text='待使用';break;
                        case 1:text='已过期';break;
                    }
                    return '<li class="'+ className +'">'+ text +'</li>';
                },
            },
            on: {
                slideChangeTransitionStart: function(){
                    var index = this.activeIndex;
                    if(index == 0) $(".list-tabs").attr("class","list-tabs unused");
                    else $(".list-tabs").attr("class","list-tabs expired");
                },
            },
        });

        // 订单点击跳转
        $(document).on("click",".list-li",function(){
          var orderid = $(this).attr("orderid");
          //todo 根据orderid跳转到对应的详情页

          $(location).attr('href', "poolingDetail.html");
        });

    </script>

  </body>
</html>
